<template>
  <div class="container">
    <Breadcrumb :items="['勾兑', '原酒库存']" />
    <a-card direction="vertical" :size="12" fill title="原酒库存">
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="openWineTankDialog">
              <template #icon>
                <icon-plus />
              </template>
              新增酒罐
            </a-button>
            <a-tooltip :content="$t('searchTable.actions.refresh')">
              <div class="action-icon" @click="getTankList()"
                ><icon-refresh size="18"
              /></div>
            </a-tooltip>
          </a-space>
        </a-col>
      </a-row>
      <a-table
        :columns="columns"
        :data="tableData"
        :bordered="{ wrapper: true, cell: true }"
      >
        <template #wine_tank_status="{ record }">
          <span v-if="record.wine_tank_status === '1'">大楂</span>
          <span v-else-if="record.wine_tank_status === '2'">二楂</span>
          <span v-else>混楂</span>
        </template>
        <template #actions="{ record }">
          <a-button
            type="text"
            size="small"
            v-if="record.wine_tank_status !== '3'"
            @click="openWineHunDialog(record)"
            >混楂</a-button
          >
          <a-button
            type="text"
            size="small"
            v-if="record.wine_tank_status === '3'"
            @click="wineOut(record)"
            >出库</a-button
          >
        </template>
      </a-table>
    </a-card>
    <GouduiWineOut
      ref="gouduiWineOut"
      :getTankName="getTankName"
      :getTargetName="getTargetName"
      :targetList="targetList"
      :tanktableData="tableData"
      class="m-t-10" />
    <SaveWineTankDialog ref="saveWineTankDialog" :getTankList="getTankList" />
    <WineOutDialog
      ref="wineOutDialog"
      :targetList="targetList"
      :getTarget="getTarget"
      :getGouduiOutWineListAgaig="getGouduiOutWineListAgaig"
      :getTankList="getTankList" />
    <WneHunDialog
      ref="wneHunDialog"
      :tableData="tableData"
      :getTankList="getTankList" /></div
></template>

<script lang="ts" setup>
import { ref } from 'vue';
import SaveWineTankDialog from './components/saveWineTankDialog.vue';
import WneHunDialog from './components/wneHunDialog.vue';
import WineOutDialog from './components/wineOutDialog.vue';
import {
  getWineTankList,
  getTargetList,
  gouduiOutWineList,
} from '@/api/winepro';
import GouduiWineOut from './components/gouduiWineOut.vue';
const tableData = ref([]);
const targetList = ref([]);
const gouduiWineOut = ref(null);
// 重新获取出库的详情数据
const getGouduiOutWineListAgaig = () => {
  gouduiWineOut.value.getGouduiOutWineList();
};
const getTarget = async () => {
  const { code, data } = await getTargetList();
  if (code === 200) {
    targetList.value = data;
  }
};
getTarget();
// 根据id获取tank_name
const getTankName = (id) => {
  const tank = tableData.value.find((item) => item.id === id);
  return tank ? tank.wine_tank_name : '';
};
// 根据id获取出库目标
const getTargetName = (id) => {
  const target = targetList.value.find((item) => item.id === id);
  return target.target_name;
};

const openWineHunDialog = (record) => {
  wneHunDialog.value.openDialog(record);
};
const getTankList = async () => {
  tableData.value = [];
  const { code, data } = await getWineTankList();
  if (code === 200) {
    tableData.value = data;
  }
};
getTankList();
const saveWineTankDialog = ref(null);
const wneHunDialog = ref(null);
const wineOutDialog = ref(null);
const wineOut = (record) => {
  wineOutDialog.value.openDialog(record);
};
const columns = ref([
  { title: '编号', align: 'center', dataIndex: 'id', width: 120 },
  { title: '酒罐名称', align: 'center', dataIndex: 'wine_tank_name' },
  { title: '酒罐容量(公斤)', align: 'center', dataIndex: 'wine_tank_capacity' },
  { title: '库存酒量', align: 'center', dataIndex: 'wine_tank_stock' },
  {
    title: '酒罐类别',
    align: 'center',
    dataIndex: 'wine_tank_status',
    slotName: 'wine_tank_status',
  },
  { title: '操作', align: 'center', dataIndex: 'actions', slotName: 'actions' },
]);
const openWineTankDialog = () => {
  saveWineTankDialog.value.openDialog();
};
</script>

<style lang="scss" scoped></style>